<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>在线制作图表</title>
</head>
<body>
	<canvas id="myChart" height="100"></canvas>
</body>
<script src="../libs/minicomps.min.js"></script>
<script src="../libs/Unify.js"></script>
<script src="../libs/TimeFactory.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script type="text/javascript">
 //教程网址：http://chartjs.cn/docs/latest/getting-started/
 //https://www.runoob.com/chartjs/chartjs-tutorial.html
	const [parent,sw]=[document.body,mc.Stage.width-10];
	const canvas = document.getElementById('myChart');
	parent.bgColor='#F6F6F6'//背景色
	let labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份'];  // 设置 X 轴上对应的标签
	let data = {
		labels: labels,
		datasets: [{
			label: '在线生成图表功能',
			data: [65, 59, 80, 81, 56, 55, 40],
			fill: false,
			borderColor: 'rgb(75, 192, 192)', // 设置线的颜色
			tension: 0.1
		}]
	};
	let config = {
		type: 'line', // 设置图表类型
		data: data,
	};
	let myChart = new Chart(canvas, config);
	console.log(myChart);
	var body=myChart;
	let [x,y]=[5,520];
	new mc.Label(parent,x,y+=25,'横项数据,以英文逗号为分割符号');
	let txtLabel=new mc.TextInput(parent,x,y+=25).setSize(sw,25);
	new mc.Label(parent,x,y+=40,'竖项数据,以英文逗号为分割符号');
	let txtData=new mc.TextInput(parent,x,y+=25).setSize(sw,25);
	y+=40;
	let btnNames=['生成图表','清理界面']
	for(i=0;i<btnNames.length;i++){
		let btn=new mc.Button(parent,x+i*100,y,btnNames[i],onClick);
		btn.name=String(i);
	}
	y+=40;
	let names=['柱形图','气泡图','环形图','饼图','折线图','极地图','雷达图','散点团'];
	let types=['bar','bubble','doughnut','pie','line','polarArea','radar','scatter']
	for(i=0;i<names.length;i++){
		new mc.RadioButton(parent,x+i*100,y+3,1,names[i],i==0,onSelectType);
	}
	function onClick(e){
		let type=parseInt(e.target.name);
		switch(type){
			case 0:
				myChart.data.labels=txtLabel.text.split(',')
				myChart.data.datasets[0].data=txtData.text.split(',');
				update();
				break;
			case 1:
				location.reload();
				break;
		}
	}
	function onSelectType(e){
		let type=types[names.indexOf(e.detail)];
		myChart.config.type=type;
		update();
	}
	function update(){
		myChart.clear();
		myChart.update();
	}
</script>
</html>